<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ include file="/WEB-INF/page/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">

		<title>layout 后台大布局 - Layui</title>

		<link rel="stylesheet" href="${ctx }/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="${ctx }/css/font_eolqem241z66flxr.css"  media="all"/>
		<link rel="stylesheet" href="${ctx }/css/list.css" media="all"/>

		<script>
            var ctx = "${ctx}";
		</script>


	</head>
	<body>
	<form action="" method="post">
		<div  style="background-color:#f2f2f2;">
	  <div style="padding: 20px;width: 15px;">
    	<div class="layui-container " style="background-color:#fbfbfb;width: 1640px;height: 170px;">  
			  <div class="layui-row " style="padding:16px;color: #c2c2c2;">
			    <span>查询条件</span>
			    <hr>
				   		<div class="layui-row " style="padding: 30px;">
											  <div class="layui-col-md3 ">
											      <div class="layui-form-item  ">
													    <div class="layui-input-block ">
													     	<input type="text" id="dispathchID" placeholder="请输入报修的ID" class="layui-input"/>
													    </div>
													  </div>
											  </div>
											  <div class="layui-col-md4 ">
											    <div class="layui-form-item  ">
													    <div class="layui-input-block ">
													      <input type="text" id="dispathchname" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
													    </div>
													 </div>
											  </div>
											  <div class="layui-col-md3 ">
											    <div class="layui-form-item  ">
													    <div class="layui-input-block ">
													      <input type="text" id="dispathchcode" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
													    </div>
													  </div>
											  </div>
											  <div class="layui-col-md1 layui-col-space1">
											  	<span > </span>
											  </div>
								  	<button type="button" class="layui-btn layui-btn-radius  layui-col-md1">查询</button>
							</div>
			  </div>
		  </div>  
		</div>    
		
		<!-- 表格 -->
		  <div style="padding: 20px;width: 15px;">
    	<div class="layui-container " style="background-color:#fbfbfb;width: 1640px;height: 600px;">  
			  <div class="layui-row" style="padding:14px;color: #c2c2c2;">
			    <span>报修信息</span>
			    <hr>
							<div class="layui-row layui-col-space1" style="padding: 15px;">
								<!--<input type="date" name="" id="">-->
								  <table class="layui-table" lay-skin="line" id="dispatchTab">

									</table>

							</div>
					</div>
				</div>
		  </div>
		</div>
	</form>
	<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="${ctx }/layui/layui.js"></script>
	<script type="text/html" id="barEdit">
		<shiro:hasPermission name="user:user:update">
			<%--ID--%>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		</shiro:hasPermission>
		<shiro:hasPermission name="user:user:delete">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</shiro:hasPermission>
	</script>

	<script>
        layui
            .config({
                //配置js
                base: "js/"
            })
            .use(
                //引用
                ['form', 'layer', 'jquery', 'table', 'laydate'], function () {
                    var form = layui.form,
                        laydate = layui.laydate,
                        table = layui.table,//表ID
                        $ = layui.$;
                        //$ = layui.jquery//Jquery  引用$


                    //加载页面数据
                    //table.render({})分页  分页增删改后reload实时刷新当前页面数据
                    table.render({
                        id: 'dispathch',
                        elem: '#dispatchTab',//与表ID名对应
                        url: ctx + '/manger/dispatch/list',//数据接口
                        limit:10,//每页默认显示10行数据
                        limits:[10,20,30,40],//lay-ui显示的分页为假分页  真分页需要重载页
                        //列名
                        cols: [[{
                            field: 'id',//表头 表头id与封装类名字必须保持一致
                            width: 200,
                            title: '报修ID',
                            sort: true
                        }, {
                            field: 'repairType',
                            width: 200,
                            title: '报修类型'
                        }, {
                            field: 'repairName',
                            width: 200,
                            title: '报修人',
                            sort: true
                        }, {
                            field: 'phone',
                            width: 200,
                            title: '联系方式'
                        }, {
                            field: 'repairDate',
                            title: '预约时间',
                            minWidth: 200
                        },{
                            field: 'status',
                            title: '状态',
                            minWidth: 200
                        },{
                            title : '操作',
                            toolbar : '#barEdit'
                        }]
                        ],
                        //开启分页
                        page:true
                    });

                    //查询
                    $(".search_btn").click(function () {
                        //执行重载
                        table.reload(
                            'dispathch',// 此处ID必须与table.render({})分页中的ID一致
                            {
                                page : {
                                    curr : 1
                                    //重新从第 1 页开始
                                },
								//查询条件
                                where : {
                                    //key: {
                                    id : $("#dispathchID").val(),
                                    buildNo : $("#dispathchname") .val(),
                                    buildName : $("#dispathchcode") .val()
                                }
                            });
                    });

                    //监听工具条  监听的为render的ID名
                    table.on('tool(dispathch)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                $.ajax({
                                    url: ctx + '/user/delUserByUid/' //删除
                                        + data.uid,
                                    type: "get",
                                    success: function (d) {
                                        if (d.code == 0) {
                                            obj.del();
                                        } else {
                                            //shiro权限认定
                                            layer.msg("权限不足！", {
                                                icon: 5
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        } else if (obj.event === 'edit') {//编辑楼宇信息--更改信息
                            alert("这是一个弹出层")
                            //弹出层--捕获页
                            layer.open({
                                type: 2,
                                title: "编辑报修信息",//方便用户对应修改
                                area: ['400px', '500px'],//弹出层信息
                                content: ctx + "/user/editUser/" //content捕获元素
                                    + data.uid //这里content是一个普通的String
                            })
                        }

                    });

                }); //end layui


		$(function () {


        //添加文章
        $(".userAdd_btn").click(function () {
            var index = layui.layer.open({
                title: "添加文章",
                type: 2,
                content: ctx + "/user/addUser",
                success: function (layero, index) {

                }
            });
            //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
            $(window).resize(function () {
                layui.layer.full(index);
            });
            layui.layer.full(index);
        });


        //格式化时间
        function formatTime(datetime, fmt) {
            if (datetime == null || datetime == 0) {
                return "";
            }
            if (parseInt(datetime) == datetime) {
                if (datetime.length == 10) {
                    datetime = parseInt(datetime) * 1000;
                } else if (datetime.length == 13) {
                    datetime = parseInt(datetime);
                }
            }
            datetime = new Date(datetime);
            var o = {
                "M+": datetime.getMonth() + 1, //月份
                "d+": datetime.getDate(), //日
                "h+": datetime.getHours(), //小时
                "m+": datetime.getMinutes(), //分
                "s+": datetime.getSeconds(), //秒
                "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
                "S": datetime.getMilliseconds()
                //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1,
                        (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
                            .substr(("" + o[k]).length)));
            return fmt;
        }
        })
	</script>
	</body>
</html>
